<template>
  <div class="imgPoup flex" v-show="imgBoxShow" @mousewheel="imgZoom($event)">
    <transition name="fadeOacityImg">
      <div class="imgBox" v-show="imgBoxShow" ref="imgBox">
        <img :src="imgSrc" ref="image" @mousedown.left.stop="drag($event)" @mousemove.left.stop.prevent="move($event)" @mouseup.stop="up">
      </div>
    </transition>
  </div>
</template>



<script>
export default {
  props: ["imgSrc"],
  watch: {
    imgSrc(url) {
      if (url) {
        const { image } = this.$refs;
        image.onload = () => {
          this.imgOption.width = image.width;
          this.imgOption.height = image.height;
        };
        this.imgBoxShow = true;
      }
    }
  },
  data() {
    return {
      imgBoxShow: false,
      imgOption: {
        width: "",
        height: "",
        left: 0,
        top: 0
      },
      moveStatus: false,
      clickStatus: 0,
      mDown: {
        ofLeft: "",
        ofTop: "",
        clientX: "",
        clientY: ""
      }
    };
  },
  mounted() {},
  methods: {
    drag(e) {
      this.moveStatus = true;
      this.moveCount = 0;
      this.mDown.ofLeft = this.imgOption.left;
      this.mDown.ofTop = this.imgOption.top;
      this.mDown.clientX = e.clientX;
      this.mDown.clientY = e.clientY;
    },
    move(e) {
      if (!this.moveStatus) return;
      this.moveCount++;
      this.imgOption.left = this.mDown.ofLeft + e.clientX - this.mDown.clientX;
      this.imgOption.top = this.mDown.ofTop + e.clientY - this.mDown.clientY;
      this.setImgBox();
    },
    up() {
      this.moveStatus = false;
      this.closeImg();
    },
    resetImg() {
      let { image, imgBox } = this.$refs;
      this.mDown.ofLeft = "";
      this.mDown.ofTop = "";
      this.mDown.clientX = "";
      this.mDown.clientY = "";
      this.imgOption.left = 0;
      this.imgOption.top = 0;
      image.style.width = "";
      image.style.height = "";
      imgBox.style.transform = `translateX(0) translateY(0)`;
    },
    setImgBox() {
      const { imgBox } = this.$refs;
      imgBox.style.transform = `translateX(${this.imgOption.left}px) translateY(${this.imgOption.top}px)`;
    },
    //放大缩小
    imgZoom(e) {
      e.preventDefault();
      const { wheelDelta } = e;
      let { image } = this.$refs;
      let width, height;
      const zoomW = this.imgOption.width / 10;
      const zoomH = this.imgOption.height / 10;
      if (wheelDelta > 0) {
        width = image.width + zoomW;
        height = image.height + zoomH;
      } else {
        width = image.width - zoomW;
        height = image.height - zoomH;
      }
      image.style.width = `${width || zoomW}px`;
      image.style.height = `${height || zoomH}px`;
      this.setImgBox();
    },
    closeImg() {
      if (this.moveCount > 1) return;
      this.imgBoxShow = false;
      this.resetImg();
      this.$emit("update:imgSrc", "");
    }
  }
};
</script>
<style lang='scss' scoped>
.fadeOacityImg-enter-active {
  opacity: 1;
  transition: all 0.5s;
  transform: scale(1, 1);
}
.fadeOacityImg-enter {
  opacity: 0;
  transform: scale(0.1, 0.1);
}
.imgPoup {
  position: fixed;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 5;
  .imgBox {
    position: relative;
    img {
      cursor: all-scroll;
      max-width: none;
    }
  }
}
</style>